<template>
    <div class="chartBox">
        <div class="item" id="yxin"></div>
        <div class="item" id="yzt"></div>
    </div>
    <height-chart ref="chartRef"/>
</template>
<script setup>
import {ref,onMounted,nextTick} from "vue"
import heightChart from '@/components/custom/heightChart.vue'
import {getAssetTrend,getAssetCondition} from '@/api/plant'
import { useUserStore } from '@/pinia/modules/user'

const userStore = useUserStore()

const chartRef = ref(null)
const asset = ref({})

const props = defineProps({
    companyId:''
})

onMounted( async()=>{
    const res = await getAssetTrend({companyId: props.companyId || null}) // userStore.userInfo.companyId
    asset.value = res.data
    await nextTick()
    let categories = []
    let values = []
    asset.value.forEach(item => {
        categories.push(item.createTime)
        values.push(item.areaTotal)
    });
    chartRef.value.createPillar('yzt','土地资产趋势',categories,values)
    //chartRef.value.createPillar('yzt',['2023年1月','2023年6月','2023年12月'],[60, 89, 106])
    
    let total = 0
    const res2 = await getAssetCondition(props.companyId || null)
    if(res2.data && res2.data.areaTotal){
        total = res2.data.areaTotal
    }
    chartRef.value.createAnnular('yxin',total+'亩',total)
})
</script>
<style lang="scss">
.chartBox{
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10px 0 0 0;
    .item{
        flex: 1;
        &+.item{
            margin-left: 10px;
        }
    }
    .highcharts-data-label-connector{
        display: none;
    }
}

</style>
